import React, { useContext, useEffect, useState } from 'react';
import { Empty, Table } from 'antd';

import { ApplyUpdateContext } from '../common/ApplyContext';
import { getApplyPackTableColumns } from '../mconfig';
import { ApplyUpdateAPI } from '../common/type';
import '../common/style.less';

/**
 * @UpdatePackList 步骤条第三步采购内容表格组件
 * @param packList 表格数据
 * @param jumpSource 跳转寻源
 * @returns
 */
const UpdatePackList: React.FC<ApplyUpdateAPI.IUpdatePackListProps> = ({ packList, onSetOpen }) => {
  const { prefixCls, finallyType } = useContext(ApplyUpdateContext);
  const [dataSource, setDataSource] = useState<Record<string, any>[]>([]); /** 表格数据 */

  /** 查询申请详情，并回显数据 */
  useEffect(() => {
    if (packList?.length) setDataSource(packList);
  }, [packList]);

  const onView = (record) => {
    onSetOpen({ isShow: true, record });
  };

  return (
    <div className={`${prefixCls}-pack`}>
      <div className={`${prefixCls}-pack-container`}>
        {/* `${prefixCls}-pack-container-pack-name` */}
        <div className={'apply-updateDetail-packInfoTitle'}>
          <span>标包详情</span>
        </div>
        <div className={`list-table ${prefixCls}-pack-container-inner apply-updateDetail-packInfoCenter`}>
          {finallyType == 'view' && JSON.stringify(dataSource) == '[]' ? (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          ) : dataSource.length > 0 ? (
            <Table
              scroll={{ x: true, y: 160 }}
              bordered
              size="small"
              dataSource={dataSource}
              columns={getApplyPackTableColumns({ onView })}
              rowKey={'id'}
              pagination={false}
            />
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
        </div>
      </div>
    </div>
  );
};

export default UpdatePackList;
